<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>天气预报</title>
		<link rel="stylesheet" type="text/css" href="css/tianqi.css"/>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			input{
				border: 0;
				box-sizing: border-box;
				background-color: rgba(135,55,45,0);
				width: 400px;
				height: 100%;
				padding-left: 15px;
			}
			h1{
				text-align: center;
				margin: 10px;
			}
			
			#app{
				width: 100%;
				min-height:140px ;
			}
		</style>
	</head>
	<body>
		<!--主体区域-->
		<section id="xwapp">
		<section id="app">
			<h1>天气预报</h1>
			<div class="up">
				<input type="text" v-model="city" @keyup.enter="searcWeat" id="" value="" />
				<div class="shousuo">
					<label>搜索</label>
				</div>
				<div class="gjz">
					<span @click="chagcity('襄阳')">襄阳</span>
					<span @click="chagcity('深圳')">深圳</span>
					<span @click="chagcity('北京')"> 北京</span>
					<span @click="chagcity('上海')">上海</span>
				</div>
			</div>
		</section>
		
		<div class="box">
			<ul class="uls">
				<li v-for="item in weatherList">
					<div class="type">
						<span>{{item.type}}</span>
					</div>
					<div class="temp">
						<b>{{item.low}}</b>
						~
						<b>{{item.high}}</b>
					</div>
					<div class="data">
						<span>{{item.date}}</span>
					</div>
				</li>
			</ul>
		</div>
		</section>

	</body>
	<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mian.js" type="text/javascript" charset="utf-8"></script>

</html>
